<%@page import="bean.portDTO"%>
<%@page import="bean.PortfolioVo"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src='/kiSunnyShop/Community/jquery-1.11.2.js'></script>
<script src='/kiSunnyShop/js/port.js'></script>
<script>
$(document).ready(initializeGrid);

function initializeGrid() {
  $("ul#grid li img").each(function() {
    var width = $(this).width() / 50 + "em";
    var height = $(this).height() / 100 + "em";
    $(this).css("width",width);
    $(this).css("height",height);
  });
}
$("#grid_slider").slider({
	  value: 50,
	  max: 100,
	  min: 50,
	  slide: function(event, ui) {
	    $('ul#grid li').css('font-size',ui.value+"px");
	  }
	});
</script> 

<style type="text/css">
html,body {margin:0; padding:0; clear:left;}
#page{
	display:inline-block;
	width:1150px;

}
.img1 {
	margin-top:2px;

	max-width: 100%;
	height: auto;
	width: auto;
}
.btnStyle { color: #FFF; background-color: #666; margin: 5px; padding-top: 5px; padding-right: 10px;
 padding-bottom: 5px; padding-left: 10px; border: 1px solid #000; }
ul#grid li {
  max-width:1150px;
  list-style: none outside;
  float: left;
  margin-right: 5px;
  width: 300px;
  height: 500px;
  line-height: 30px;
  font-size: 50px;
  width: 4.3em;
  height: 7.5em;
  overflow:hidden;
  margin-bottom:100px;
}
ul#grid li img {
 
  width:430px;
  height:600px;
  
}
ul#grid li div {
 margin-left:4%;
 width:80%;
  margin-top:2px;
  font-size:20px;
  width:200px;
  height:150px;
}

ul#grid li div a:hover{
  border-bottom:1px solid #00FFFF;
}

</style>
<title>shoping room</title>
</head>
<body>
<%request.setCharacterEncoding("utf-8");%>
<jsp:useBean id='vo' class='bean.PortfolioVo' scope='page'/>
<jsp:setProperty property="*" name="vo"/>

<%
	request.setCharacterEncoding("utf-8");
	portDTO dto = new portDTO();
	dto.setVo(vo);
	ArrayList<PortfolioVo> al = dto.select_top();	
%>


<div id="wrapper2">
<form id='portFrm' method='post'> <!-- 상태 저장 form -->
	<input type='hidden' name='nowPage' value=<%=vo.getNowPage()%>>
	<input type='hidden' name='find' value=<%=vo.getFind()%>>
	<input type='hidden' name='rno' value=<%=vo.getRno()%>>	
		
</form>

    
<!-- 사진 이미지 출력 --><div id="grid_slider">
<%for(int a=0; a<al.size(); a++){PortfolioVo pv = al.get(a);%>



	<div class='ui-slider-handle'>
		<ul id="grid">
			<li><a href='#' style="text-decoration:none" onclick='goView(<%=dto.getNowPage()%>,<%=pv.getRno()%>)' >
				<img src="/kiSunnyShop/memberPhoto/<%=pv.getPhoto() %>" class="img1"/></a>
				<div class="ho"><a href='#' style="text-decoration:none" onclick='goView(<%=dto.getNowPage()%>,<%=pv.getRno()%>)' >
				 <font size ='5' face='arial'><%=pv.getCate()%></font></a>
				<hr><font size ='2'><%=pv.getSubject()%></font></div>
			</li>
		</ul>
	</div>

<%}%>
</div>
<div id="page">
<!-- 검색 -->
<form name='port_list_frm' method='post' action='index1.jsp'>
		
		<input type='text' name='find' value='<%=vo.getFind()%>'>
		<input type='submit' value='검색'>
		<input type='button' id='btnInput' value='글쓰기'>
	</form>
     
<a href='#' style="text-decoration:none" onclick='goPage1(1)'>◀</a>
<%if(dto.getStartPage() !=1){%>
<a href='#'  style="text-decoration:none" onclick='goPage1(<%=dto.getStartPage()-1%>)'>◁</a>
<%} %>


<!-- 페이지 뷰 -->

<% 
int i=0;

for(i=dto.getStartPage(); i<=dto.getEndPage(); i++)
{%>
	<a href='#' onclick='goPage1(<%=i%>)'><%=i%></a>
<% }%>

<%if(dto.getTotPage() != dto.getEndPage()){ %>
<a href='#' style="text-decoration:none" onclick='goPage1(<%=i%>)'>▷</a>
<%} %>
<a href='#' style="text-decoration:none" onclick='goPage1(<%=dto.getTotPage()%>)'>▶</a>	

</div>
 </div>
		

<script>listInit();</script>
</body>
</html>